<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-08-31 11:37:05
 * @LastEditTime : 2021-09-09 10:22:27
 * @FilePath     : /newhope/src/App.vue
 * @Description  : 
-->

<script setup lang="ts">
import logo from "/@/assets/images/logo.png";
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
import { useGo } from "/@/hooks/go";
import html2canvas from "html2canvas";
import { useHttp } from "/@/hooks/http";
import { useBus } from "/@/hooks/bus";
import { download } from "/@/utils/download";
import { Music } from '/@/components/index'
import { convertToImage } from "/@/utils/toImage";
import { State } from "/@/store/user";
const [send] = useHttp();
const [go] = useGo();
const app = ref(null);
const showMusic = ref(true)
const showLogo = ref(true);
const bus = useBus();
const store = useStore();
onMounted(async () => {
  bus.on("showLogo", () => {
    showLogo.value = true;
  });
  bus.on('showMusic', ({ show }: { show: boolean }) => {
    showMusic.value = show
  })

  bus.on("print", async () => {
    showMusic.value = false
    showLogo.value = false;
    let canvas = document.createElement("canvas");
    var dpr = (window.devicePixelRatio || 1);
    // 图片高度
    var w = parseInt(
      window.getComputedStyle(document.body as unknown as HTMLElement).width
    );
    // 图片宽度
    var h = parseInt(
      window.getComputedStyle(document.body as unknown as HTMLElement).height
    );
    canvas.width = w * dpr;
    canvas.height = h * dpr;
    canvas.style.width = w + "px";
    canvas.style.height = h + "px";

    canvas.getContext("2d")?.scale(dpr, dpr);
    const url = await convertToImage(document.querySelector('.app') as HTMLElement, {
      canvas,
      backgroundColor: null,
    });
    // download("祝福", url);
    bus.emit("showImage", { url });
    // bus.emit("showMessage", { show: true });
    // go({ name: "bestWishesSuccess" });
  });
  await send<{
    data: {
      awards: State["prizeList"];
      fans: State["userInfo"];
      myawards: State["myawards"];
      win: State['win']
      qrimg: string
      wins: number[]
    };
  }>(
    {
      method: "GET",
      params: {
        i: 3,
        logout: 1,
        action: "index",
      },
    },
    (response) => {
      store.commit("user/editWins", response.data.data.wins);
      store.commit("user/initUserInfo", response.data.data.fans);
      store.commit("user/initPrizeList", response.data.data.awards);
      store.commit("user/initMyAwards", response.data.data.myawards);
      store.commit("user/initWin", response.data.data.win);
      store.commit("user/editQrcode", response.data.data.qrimg);
    },
    () => {
      alert("网络开了一点小差");
    }
  );
});
</script>

<template>
  <div class="app" ref="app">
    <img class="logo" alt="logo" v-if="showLogo" :src="logo" />
    <Music v-if="showMusic" />
    <router-view />
  </div>
</template>

<style lang="scss" scoped>
.app {
  height: 100vh;
  width: 100vw;
  position: relative;
  .logo {
    position: absolute;
    top: 21px;
    left: 50%;
    transform: translateX(-50%);
    width: 325px;
    height: 39px;
    object-fit: cover;
    z-index: 12;
  }
}
</style>
